<template>
	<view class="container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
					<view class="user-info">
						<view class="avatar-box">
						    <img src='static/icon/person.png' class="avatar-img">
						</view>
						<view class="text-info">
							<text class="username">{{ userInfo.username }}</text>
							<text class="student-id">用户ID: {{ userInfo.student_id }}</text>
						</view>
					</view>
				</view>
		
				<!-- 修改后的信息列表 -->
				<view class="info-list">
					<view class="list-item">
						<view class="custom-icon">🎓</view>
						<text class="item-text">学号：{{ userInfo.student_id }}</text>
					</view>
					<view class="list-item" @tap="navigateToEmergencyContact">
						<view class="custom-icon">📞</view>
						<text class="item-text">紧急联系人：{{ userInfo.emergency_contact || '未设置' }}</text>
						<view class="arrow">→</view>
					</view>
				</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<button class="btn" @tap="changePassword">修改密码</button>
			<button class="btn logout" @tap="handleLogout">退出登录</button>
		</view>
	</view>
</template>

<script>
import baseUrl from '../../static/path.js'
export default {
	data() {
		return {
			userInfo: {
				username: "",
				student_id: "",
				emergency_contact: ""
			}
		};
	},
	onShow() {
	    const token = uni.getStorageSync('access_token');
	    if (!token) {
	        uni.reLaunch({
	            url: '/pages/login/login'
	        });
	        return;
	    }
	    uni.request({
	        url: baseUrl + '/user/get_person_message',
	        method: 'POST',
			data: {
				token: token
			},
	        success: (res) => {
	            if (res.statusCode === 200) {
	                this.userInfo = {
	                    username: res.data.username,
	                    student_id: res.data.student_id,
	                    emergency_contact: res.data.emergency_contact
	                };
	            } else {
	                uni.showToast({
	                    title: '获取用户信息失败',
	                    icon: 'none'
	                });
	            }
	        },
	        fail: (err) => {
	            uni.showToast({
	                title: '网络错误',
	                icon: 'none'
	            });
	        }
	    });
	},
	methods: {
		handleLogout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						uni.removeStorageSync('token');
						uni.reLaunch({
							url: '/pages/login/login'
						});
					}
				}
			});
		},
		changePassword() {
		    uni.showModal({
		        title: '修改密码',
		        content: '',
		        editable: true,
		        placeholderText: '请输入新密码',
		        success: (res) => {
		            if (res.confirm) { // 用户点击确定
		                const newPassword = res.content; // 获取用户输入的密码
		                if (newPassword) {
		                    uni.showModal({
		                        title: '确认密码',
		                        content: '',
		                        editable: true,
		                        placeholderText: '请确认新密码',
		                        success: (resConfirm) => {
		                            if (resConfirm.confirm) {
		                                const confirmPassword = resConfirm.content; // 获取确认密码
		                                if (newPassword === confirmPassword) {
		                                    // 密码一致，发送请求更新密码
		                                    uni.request({
		                                        url: baseUrl + '/user/update_password',
		                                        method: 'POST',
		                                        data: {
		                                            token: uni.getStorageSync('access_token'),
		                                            new_password: newPassword  // 使用新密码字段
		                                        },
		                                        success: (response) => {
		                                            if (response.statusCode === 200) {
		                                                uni.showToast({
		                                                    title: '密码修改成功',
		                                                    icon: 'success'
		                                                });
		                                            } else {
		                                                uni.showToast({
		                                                    title: '更新失败，请重试',
		                                                    icon: 'none'
		                                                });
		                                            }
		                                        },
		                                        fail: (error) => {
		                                            uni.showToast({
		                                                title: '网络错误，请稍后重试',
		                                                icon: 'none'
		                                            });
		                                        }
		                                    });
		                                } else {
		                                    uni.showToast({
		                                        title: '两次输入的密码不一致',
		                                        icon: 'none'
		                                    });
		                                }
		                            }
		                        }
		                    });
		                } else {
		                    uni.showToast({
		                        title: '密码不能为空',
		                        icon: 'none'
		                    });
		                }
		            }
		        }
		    });
		},
		navigateToEmergencyContact(){
		        // 弹出输入框，提示用户输入新的紧急联系人电话
		        uni.showModal({
		            title: '修改紧急联系人',
		            content: '',
		            editable: true, // 允许用户输入
		            placeholderText: '请输入修改后的电话号码', // 输入框的占位提示
		            success: (res) => {
		                if (res.confirm) { // 用户点击确定
		                    const newContact = res.content; // 获取用户输入的内容
		                    if (newContact) {
		                        // 更新用户信息
		                        this.userInfo.emergency_contact = newContact;
		                        uni.request({
		                            url: baseUrl + '/user/update_emergency_contact',
		                            method: 'POST',
		                            data: {
		                                token: uni.getStorageSync('access_token'),
		                                emergency_contact: newContact
		                            },
		                            success: (response) => {
		                                if (response.statusCode === 200) {
		                                    uni.showToast({
		                                        title: '紧急联系人更新成功',
		                                        icon: 'success'
		                                    });
		                                } else {
		                                    uni.showToast({
		                                        title: '更新失败，请重试',
		                                        icon: 'none'
		                                    });
		                                }
		                            },
		                            fail: (error) => {
		                                uni.showToast({
		                                    title: '网络错误，请稍后重试',
		                                    icon: 'none'
		                                });
		                            }
		                        });
		                    } else {
		                        uni.showToast({
		                            title: '紧急联系人电话不能为空',
		                            icon: 'none'
		                        });
		                    }
		                }
		            }
		        });
		    }
	}
}
</script>

<style>
/* 主容器 */
.container {
	padding: 30rpx;
	background-color: #e3f2fd;
	min-height: 896px;
}

/* 用户信息卡片 */
.user-card {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 40rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
}

.custom-icon {
	font-size: 40rpx;
	margin-right: 10rpx;
}
.avatar-img {
    width: 80%;    
    height: 80%;    
    object-fit: cover; 
    display: block;
}
.arrow {
	color: #999;
	font-size: 36rpx;
	margin-left: 20rpx;
}
.user-info {
	display: flex;
	align-items: center;
}

.avatar-box {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	background-color: #2196F3;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 30rpx;
}

.text-info {
	display: flex;
	flex-direction: column;
}

.username {
	font-size: 36rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.student-id {
	font-size: 28rpx;
	color: #666;
}

/* 信息列表 */
.info-list {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 0 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
}

.list-item {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #eee;
}

.list-item:last-child {
	border-bottom: none;
}

.item-text {
	font-size: 30rpx;
	color: #333;
	margin-left: 20rpx;
	flex: 1;
}

/* 操作按钮 */
.action-buttons {
	margin-top: 60rpx;
	padding: 0 30rpx;
}

.btn {
	background-color: #2196F3;
	color: #fff;
	border-radius: 50rpx;
	font-size: 32rpx;
	height: 80rpx;
	line-height: 80rpx;
	margin-bottom: 30rpx;
	border: none;
}

.logout {
	background-color: #fff;
	color: #2196F3;
	border: 2rpx solid #2196F3;
}
</style>